<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getHomeContentApi } from '@/api'
import { useCommonStore } from '@/stores'
import Category from '@/views/index/components/Category.vue'
const router = useRouter()
const nav = (name) => {
  router.push({ name })
}
const title = ref('')
const tips = ref([])
const gridList = ref([])
const payList = ref([])
onMounted(() => {
  const { setPayList } = useCommonStore()
  getHomeContentApi().then((res) => {
    title.value = res.index_tips
    tips.value = res.index_tips_lists
    gridList.value = res.services_home_top
    payList.value = res.home_payment
    setPayList(res.home_payment)
  })
})
</script>

<template>
  <div class="home-page">
    <div class="bg-gray-50 pb-10">
      <div class="tips max-[750px]:pt-5 max-w-[1200px] mx-auto max-[1200px]:p-3">
        <div
          class="w-full text-center text-3xl text-white p-5 font-bold bg-amber-600 max-[750px]:text-base leading-relaxed"
        >
          {{ title }}
        </div>
        <div class="w-full text-center text-white bg-gray-700">
          <div
            class="w-full text-xl p-4 max-[750px]:text-xs leading-relaxed"
            v-for="(item, index) in tips"
            :class="index === 0 ? 'text-2xl font-bold max-[750px]:text-sm' : ''"
            :key="item"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="flex items-start gap-10 pt-8 max-w-[1200px] mx-auto max-[1200px]:p-3">
        <Category style="width: 280px; border: 1px solid #e8e8e8" class="max-[750px]:hidden" />
        <div class="flex-1 grid grid-cols-2 gap-5 max-[750px]:grid-cols-1">
          <div
            class="flex gap-4 items-center max-[750px]:flex-col"
            v-for="item in gridList"
            :key="item"
          >
            <div class="size-20 rounded-full max-[750px]:size-15">
              <img :src="item.pic" class="w-full h-full" alt="" />
            </div>
            <div class="flex-1 flex flex-col gap-2">
              <div class="font-bold text-xl max-[750px]:text-center max-[750px]:text-base">
                {{ item.title }}
              </div>
              <div class="text-gray-500 max-[750px]:text-sm">
                {{ item.content }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-center flex-wrap gap-5 pt-5 pb-5" v-if="payList.length">
      <img
        :src="item.img"
        alt=""
        class="h-15"
        v-for="item in payList"
        :key="'pat_img_' + item.id"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.buy-d2 {
  background: url('@/assets/icons/subscribe-image.jpg') no-repeat center center;
  background-size: cover;
}
</style>
